<!-- Horizontal Form -->
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">添加用户</h3>
        <h3 class="msg"></h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">

            <div class="form-group">
                <label for="usernameId" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" name="username" class="form-control"
                           id="usernameId">
                </div>
            </div>
            <div class="form-group" id="pwdDiv">
                <label for="passwordId" class="col-sm-2 control-label">密码</label>

                <div class="col-sm-10">
                    <input type="password" name="password" class="form-control"
                           id="passwordId">
                </div>
            </div>

            <div class="form-group">
                <label for="deptId" class="col-sm-2 control-label">所属部门</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control load-sys-dept"
                           readonly="readonly" id="deptId" placeholder="上级部门">
                </div>
            </div>

            <div class="form-group">
                <label for="emailId" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-10">
                    <input type="text" name="email" class="form-control" id="emailId">
                </div>
            </div>
            <div class="form-group">
                <label for="phoneId" class="col-sm-2 control-label">手机号</label>
                <div class="col-sm-10">
                    <input type="text" name="mobile" class="form-control" id="phoneId">
                </div>
            </div>
            <div class="form-group">
                <label for="rolesId" class="col-sm-2 control-label">角色</label>
                <div class="col-sm-10" id="rolesId"></div>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-cancel">Cancel</button>
            <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
    </form>
    <div class="layui-layer layui-layer-page layui-layer-molv layer-anim"
         id="treeLayer" type="page" times="2" showtime="0" contype="object"
         style="z-index: 59891016; width: 300px; height: 450px; top: 100px; left: 500px; display: none">
        <div class="layui-layer-title" style="cursor: move;">选择部门</div>
        <div class="layui-layer-content" style="height: 358px;">
            <div style="padding: 10px;" class="layui-layer-wrap">
                <ul id="zTreeId" class="ztree"></ul>
                <!-- 动态加载树 -->
            </div>
        </div>
        <span class="layui-layer-setwin"> <a
                class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel"></a></span>
        <div class="layui-layer-btn layui-layer-btn-">
            <a class="layui-layer-btn0 btn-confirm">确定</a> <a
                class="layui-layer-btn1 btn-cancel">取消</a>
        </div>
    </div>
</div>
<script type="text/javascript"
        src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js"></script>
<script type="text/javascript">
	var zTree;
	//初始化zTree时会用到
	var setting = {
		data : {
			simpleData : {
				enable : true,
				idKey : "id", //节点数据中保存唯一标识的属性名称
				pIdKey : "parentId", //节点数据中保存其父节点唯一标识的属性名称
				rootPId : null
			//根节点id
			}
		//json 格式javascript对象
		}
	}//json 格式的javascript对象
	$(document).ready(
			function() {
				//页面加载完成以后加载角色信息并初始化页面
				doLoadRoles();
				//事件注册
				$(".box-footer").on("click", ".btn-cancel", doCancel).on(
						"click", ".btn-save", doSaveOrUpdate);

				$("#treeLayer").on("click", ".btn-cancel", doHideTree).on(
						"click", ".btn-confirm", doConfirm);

				$(".form-horizontal").on("click", ".load-sys-dept",
						doLoadZTreeNodes);
			});
	function doHideTree() {
		$("#treeLayer").css("display", "none");
	}
	//确定按钮
	function doConfirm() {
		//1.获取选中的记录(id,name);
		var selectedNodes = zTree.getSelectedNodes();
		var node = selectedNodes[0];
		//2.将id和name填写或绑定在具体对象上
		$("#deptId").val(node.name);
		console.log("node.id=" + node.id)
		$("#deptId").data("deptId", node.id)
		//3.隐藏zTree对应的Div
		doHideTree();
	}

	function doLoadZTreeNodes() {
		var url = "dept/doFindZTreeNodes";
		$("#treeLayer").css("display", "block");
		$.getJSON(url, function(result) {
			if (result.state == 1) {
				zTree = $.fn.zTree.init($("#zTreeId"), setting, result.data);
			} else {
				alert(result.message);
			}
		});
	}
	function doCancel() {
		$("#mainContentId").removeData("rowData");
		$("#mainContentId").load("user/user_list");
	}
	function doSaveOrUpdate() {
		var rowData = $("#mainContentId").data("rowData");
		//1.获取表单数据
		var params = doGetEditFormData();
		if (rowData)
			params.id = rowData.user.id;
		//2.发起异步请求
		var insertUrl = "user/doSaveObject";
		var updateUrl = "user/doUpdateObject";
		var url = rowData ? updateUrl : insertUrl;
		console.log(params);
		$.post(url, params, function(result) {
			if (result.state == 1) {
				alert(result.message);
				doCancel();
			} else {
				alert(result.message);
			}
		})
	}
	function doGetEditFormData() {
		//获取用户输入的数据
		var params = {
			username : $("#usernameId").val(),
			password : $("#passwordId").val(),
			email : $("#emailId").val(),
			mobile : $("#phoneId").val(),
			deptId : $("#deptId").data("deptId")
		}
		//获取选择的角色
		var roleIds = new Array();
		$("#rolesId input[name='roleId']").each(function() {
			if ($(this).prop("checked")) {
				roleIds.push($(this).val());
			}
		});
		params.roleIds = roleIds.toString();
		return params;
	}
	function doLoadRoles() {
		var url = "role/doFindRoles"
		$.getJSON(url, function(result) {
			if (result.state == 1) {
				doInitPageRoles(result.data);
				doInitFormData();//修改时
			} else {
				alert(result.message);
			}
		})
	}
	function doInitFormData() {
		var data = $("#mainContentId").data("rowData");
		if (!data)
			return;
		$("#pwdDiv").remove();
		console.log(data);
		//初始化用户信息 
		$("#usernameId").val(data.user.username);
		$("#deptId").val(data.user.sysDept ? data.user.sysDept.name : '');
		$("#deptId").data("deptId",
				data.user.sysDept ? data.user.sysDept.id : '');
		$("#emailId").val(data.user.email);
		$("#phoneId").val(data.user.mobile);
		//初始化用户角色信息
		var ids = data.roleIds;
		for ( var i in ids) {
			$("#rolesId input[value='" + ids[i] + "']").prop("checked", true);
		}
	}
	function doInitPageRoles(data) {//List<CheckBox>
		//1.获取角色要显示的位置对象
		var div = $("#rolesId");
		div.empty();
		//2.迭代数据，将数据追加到div
		var input = "<input type='checkbox' name='roleId' value='[id]'>[name]"
		for ( var i in data) {
			//记住每次replace时都会产生一个新的字符串对象
			var newInput = input.replace("[id]", data[i].id).replace("[name]",
					data[i].name);
			div.append(newInput)
		}
	}


</script>






